<template>
	<view class="box">
		<view class="list" v-if="cart_list.length > 0">
			<view class="del f28" style="display: flex;justify-content: space-between;text-align: left;">
				<text @click="goaddr"
					style="width: 600rpx;display: flex;justify-content: flex-start;">{{address?'送至:'+address.address:'未选择配送地址'}}</text>
				<text @click="del">删除</text>
			</view>
			<view class="cart" v-for="merCart in cart_list">
				<view class="" v-if="merCart.isRange == false ">
					{{merCart.mer_name}}
					<view
						style="color: #ff0000;font-size: 22rpx;margin-bottom10rpx: burlywood;display: flex;justify-content: space-between;">

						<text>当前地址不在配送范围内</text>
						<view class="f28"  @click="gotoSimilar(merCart)">
							找相似 >
						</view>
					</view>

				</view>
				<view class="" v-else>{{merCart.mer_name}}</view>
				<template v-for="(cartS,keyName) in merCart.list">
					<!-- 优惠换购开始 -->
					<view class="cart1" v-if="keyName == 'swap'">
						<!-- 头部信息 -->
						<view class="title fw-bt">
							<view class="f-w">
								<view class="tag">优惠换购</view>
								<view class="f28">组合更优惠</view>
							</view>
							<view class="f28" @click="goHuangou(merCart.mer_id)">去换购 > </view>
						</view>
						<!-- 列表 -->
						<view class="card">
							<view class="card2 f-w" v-for="(item,index) in cartS" :key="index">
								<!-- 选中按钮 -->
								<view class="choose f-w" @click="chooseShop(item)">
									<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode=""
										v-if="!item.is_choose"></image>
									<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else>
									</image>
								</view>
								<!-- 商品信息 -->
								<view class="right flex">
									<view class="img f-w" @click="godetail(item.productAttr.product_id)">
										<image :src="item.productAttr.image" v-if="item.productAttr && item.productAttr.image" mode=""></image>
										<image :src="item.product.image" v-else mode=""></image>
									</view>
									<!-- 商品信息 -->
									<view class="msg">
										<view class="one hide-line bold f30">{{item.product.store_name}}</view>
										<view class="two tag2">换购</view>
										<view class="three"></view>
										<view class="red f28 f-w">
											<view>￥{{item.productAttr.price}} </view>
											<view class="f22 tag3" v-if="item.old_price">换购价</view>
										</view>
										<view class="p2 f22 c999" v-if="item.old_price">
											￥{{item.old_price}}
										</view>
										<!-- 按钮 -->
										<view class="cart-btn f-w">
											<view class="cart1-jian f-w" @click="cartDel(item)" v-if="item.cart_num>0">
												<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png"
													mode="">
												</image>
											</view>
											<input type="number" v-model="item.cart_num" disabled
												v-if="item.cart_num>0">
											<view class="cart1-add f-w" @click="cartAdd(item)">
												<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png"
													mode="">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 优惠换购结束 -->
					<!-- 满减开始 -->
					<view class="cart1" v-if="keyName == 'full'">
						<!-- 头部信息 -->
						<view class="title fw-bt">
							<view class="f-w">
								<view class="tag">满减</view>
								<view class="f28" v-if="merCart.full_num < merCart.full_max">
									{{`满${merCart.full_max}件${merCart.full_ratio}折,还差${merCart.full_max - merCart.full_num}件`}}
								</view>
								<view class="f28" v-else>{{`满${merCart.full_max}件${merCart.full_ratio}折`}}</view>
							</view>
							<!-- 满件减 -->
							<view class="f28" @click="goGuangguang(merCart.mer_id)">去逛逛＞</view>
						</view>
						<!-- 列表 -->
						<view class="card">
							<view class="card2 f-w" v-for="(item,index) in cartS" :key="index">
								<!-- 选中按钮 -->
								<view class="choose f-w" @click="chooseShop(item)">
									<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode=""
										v-if="!item.is_choose"></image>
									<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else>
									</image>
								</view>
								<!-- 商品信息 -->
								<view class="right flex">
									<view class="img f-w" @click="godetail(item.productAttr.product_id)">
										<image :src="item.productAttr.image" v-if="item.productAttr.image" mode=""></image>
										<image :src="item.product.image" v-else mode=""></image>
									</view>
									<!-- 商品信息 -->
									<view class="msg">
										<view class="one hide-line bold f30">{{item.product.store_name}}</view>
										<view class="two tag2">满减</view>
										<view class="three"></view>
										<view class="red f28 f-w">
											<view>￥{{item.productAttr.price}} </view>
										</view>
										<!-- <view class="p2 f22 c999" v-if="item.old_price">
											￥{{item.old_price}}
										</view> -->
										<!-- 按钮 -->
										<view class="cart-btn f-w">
											<view class="cart1-jian f-w" @click="cartDel(item)" v-if="item.cart_num>0">
												<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png"
													mode="">
												</image>
											</view>
											<input type="number" v-model="item.cart_num" disabled
												v-if="item.cart_num>0">
											<view class="cart1-add f-w" @click="cartAdd(item)">
												<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png"
													mode="">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 满减结束 -->
					<!-- 搭配商品 -->
					<view class="cart1" v-if="keyName == 'collocation'">
						<!-- 头部信息 -->
						<view class="title fw-bt">
							<view class="f-w">
								<view class="tag">搭配商品</view>
							</view>
							<view class="f28" @click="goDapei(merCart.mer_id)">去逛逛＞</view>
						</view>
						<!-- 列表 -->
						<view class="card">
							<view class="card2 f-w" v-for="(item,index) in cartS" :key="index">
								<!-- 选中按钮 -->
								<view class="choose f-w" @click="chooseShop(item)">
									<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode=""
										v-if="!item.is_choose"></image>
									<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else>
									</image>
								</view>
								<!-- 商品信息 -->
								<view class="right flex">
									<view class="img f-w" @click="godetail(item.productAttr.product_id)">
										<image :src="item.ActiveSku.image" v-if="item.ActiveSku.image"  mode=""></image>
										<image :src="item.product.image" v-else mode=""></image>
									</view>
									<!-- 商品信息 -->
									<view class="msg">
										<view class="one hide-line bold f30">{{item.product.store_name}}</view>
										<view class="two tag2">满减</view>
										<view class="three"></view>
										<view class="red f28 f-w">
											<view>￥{{item.productAttr.price}} </view>
										</view>
										<!-- <view class="p2 f22 c999" v-if="item.old_price">
											￥{{item.old_price}}
										</view> -->
										<!-- 按钮 -->
										<view class="cart-btn f-w">
											<view class="cart1-jian f-w" @click="cartDel(item)" v-if="item.cart_num>0">
												<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png"
													mode="">
												</image>
											</view>
											<input type="number" v-model="item.cart_num" disabled
												v-if="item.cart_num>0">
											<view class="cart1-add f-w" @click="cartAdd(item)">
												<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png"
													mode="">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 红包凑单开始 -->
					<view class="cart1" v-if="keyName == 'ordinary'">
						<!-- 头部信息 -->
						<view class="title fw-bt" v-if="merCart.red_">
							<view class="f-w">
								<view class="tag">红包凑单</view>
								<view class="f28">
									{{`满${merCart.red_.use_min_price}减${merCart.red_.red_packet_price}`}}
								</view>
							</view>
							<view class="f28" @click="goCoudan(merCart.mer_id)">去凑单＞</view>
						</view>
						<!-- 列表 -->
						<view class="card">
							<view class="card2 f-w" v-for="(item,index) in cartS" :key="index">
								<!-- 选中按钮 -->
								<view class="choose f-w" @click="chooseShop(item)">
									<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode=""
										v-if="!item.is_choose"></image>
									<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else>
									</image>
								</view>
								<!-- 商品信息 -->
								<view class="right flex">
									<view class="img f-w" @click="godetail(item.productAttr.product_id)">
										<image :src="item.productAttr.image" v-if="item.productAttr.image" mode=""></image>
										<image :src="item.product.image" v-else mode=""></image>
									</view>
									<!-- 商品信息 -->
									<view class="msg">
										<view class="one hide-line bold f30" >{{item.product.store_name}}</view>
										<!-- <view class="two tag2">红包凑单</view> -->
										<view class="three"></view>
										<view class="red f28 f-w">
											<view>{{item.ActiveSku.sku}}</view>
										</view>
										<view class="three"></view>
										<view class="red f28 f-w">
											<view>￥{{item.productAttr.price}}</view>
										</view>
										<!-- <view class="p2 f22 c999" v-if="item.old_price">
											￥{{item.old_price}}
										</view> -->
										<!-- 按钮 -->
										<view class="cart-btn f-w">
											<view class="cart1-jian f-w" @click.stop="cartDel(item)" v-if="item.cart_num>0">
												<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png"
													mode="">
												</image>
											</view>
											<input type="number" v-model="item.cart_num" disabled
												v-if="item.cart_num>0">
											<view class="cart1-add f-w" @click.stop="cartAdd(item)">
												<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png"
													mode="">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 红包凑单结束 -->
				</template>
			</view>
			<!-- 每日推荐开始 -->
			<view class="tuijian">
				<view class="tj-title fw-ct">
					<view class="bg2"></view>
					<view class="f32">每日推荐</view>
					<view class="bg2"></view>
				</view>
				<!--  -->
				<goods></goods>
			</view>
			<!-- 每日推荐结束 -->
			<!-- 底部购物车开始 -->
			<view class="bottom fw-bt">
				<!-- 全选 -->
				<view class="f-w" @click="chooseAll(true)">
					<view class="choose f-w">
						<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode="" v-if="is_all ==false">
						</image>
						<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else></image>
					</view>
					<view class="qx f28">全选</view>
				</view>
				<!-- 合计 -->
				<view class="total f-w">
					<view class="f24 c999">合计</view>
					<view class="f-w">
						<view class="f22">￥</view>
						<view class="f36 bold total2">{{total.toFixed(2)}}</view>
					</view>
				</view>
				<!-- 立即购买 -->
				<view class="buy" @click="goBuy">立即购买</view>
			</view>
			<!-- 底部购物车结束 -->
		</view>
		<view class="none" v-else>
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/index/icon_154@2x.png" mode=""></image>
			</view>
			<view class="none-desc f30 c666 tr">购物车里空空的，去选购喜欢的商品吧</view>
			<view class="btn" @click="goHome">去首页</view>
		</view>
	</view>
</template>


<script>
	import {
		// getCartApi,
		cartChangeApi,
		cartDeleteApi
	} from '@/api/cart'
	import {
		orderCheckApi
	} from '@/api/order.js'
	import {
		getUserAddressListApi
	} from '@/api/user'
	import Cache from '@/util/cache.js'
	import goods from '@/components/goods.vue'
	export default {
		components: {
			goods
		},
		data() {
			return {
				address: '',
				is_all: true, //全选		
				cart_list: [],
				total: 0, //总额
			}
		},
		onLoad() {

		},
		onShow() {
			console.log(Cache.get('user_address', true))
			if (Cache.get('user_address', true) !== true) {
				this.address = Cache.get('user_address', true)
			}
			this.getDetail();
		},
		created() {

		},
		mounted() {
			let This = this
			getUserAddressListApi().then(res => {
		 	res.data.list.forEach(addr => {
					if (addr.is_default) {
						This.address = addr
					}
				})
				// this.check() //不需要调校验接口
			}).catch(err => {
				// this.check()
			})
		},
		methods: {
			goaddr() {
				uni.navigateTo({
					url: "/pages/client/address-choose/address-choose?orgin=1"
				})
			},
			godetail(e) {
				uni.navigateTo({
					url: "/pages/client/shop/shop-detail/shop-detail?id=" + e
				})
			},
			// 获取购物车详情
			getDetail() {
				let data = {}
				if (this.address) {
					data.address_id = this.address.address_id
				}
				this.$request('user/cart/lst2', data, 'GET').then(res => {
					// if (res.status == 200) {
					this.cart_list = res.data.list;
					// }
					this.chooseAll()
				})
			},
			// 去首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 删除购物车的商品
			del() {
				let This = this;
				uni.showModal({
					content: '是否确认删除商品？',
					confirmColor: '#F31E1E',
					success(res) {
						if (res.confirm) {
							let CartIds = []
							This.cart_list.forEach((merdata, key1) => {
								for (let key2 in merdata.list) {
									merdata.list[key2].forEach((cart, key3) => {
										if (cart.is_choose) {
											This.$delete(This.cart_list[key1]['list'][key2][key3])
											This.total -= Number(cart.productAttr.price) *
												Number(cart.cart_num);
											This.total.toFixed(2)
											CartIds.push(cart.cart_id)
										}
									})
								}
							})
							cartDeleteApi({
								cart_id: CartIds
							}).then(res => {
								This.$showToast('删除成功')
								This.getDetail()
							}).catch(err => {
								This.$showToast(err.message)
								This.getDetail()
							})
						}
					}
				})
			},
			// 去换购 优惠换购
			goHuangou(mer_id) {
				uni.navigateTo({
					url: `/pages/cart/cart-goods/cart-goods?type=4&mer_id=${mer_id}`
				})
			},
			// 去逛逛  满件减
			goGuangguang(mer_id) {
				uni.navigateTo({
					url: `/pages/cart/cart-goods/cart-goods?type=2&mer_id=${mer_id}`
				})
			},
			//搭配 搭配商品
			goDapei(mer_id) {
				uni.navigateTo({
					url: `/pages/cart/cart-goods/cart-goods?type=5&mer_id=${mer_id}`
				})
			},
			// 去凑单
			goCoudan(mer_id) {
				uni.navigateTo({
					url: `/pages/cart/cart-goods/cart-goods?type=3&mer_id=${mer_id}`
				})
			},
			/**
			 * 去店铺
			 * @param {Object} mer_id
			 */
			gotMerShop(mer_id) {
				uni.navigateTo({
					url: `/pages/client/shop/shop?id=${mer_id}`
				})
			},
			/**
			 * 全选
			 * @param {Object} isUpdateSelect  是否修改选中状态
			 */
			chooseAll(isUpdateSelect) {
				let This = this
				this.total = 0
				if (isUpdateSelect) {
					this.is_all = !this.is_all;
				}

				this.cart_list.forEach((merdata, key1) => {
					for (let key2 in merdata.list) {
						merdata.list[key2].forEach((cart, key3) => {
							if (This.is_all && This.cart_list[key1]['list'][key2][key3].isRange == true) {
								This.$set(This.cart_list[key1]['list'][key2][key3], 'is_choose', true)
								This.total = Number(cart.productAttr.price) * Number(cart.cart_num) +
									This.total;
								This.total.toFixed(2)
							} else {
								This.$set(This.cart_list[key1]['list'][key2][key3], 'is_choose', false)
							}
						})
					}
				})
			},
			// 选中商品
			chooseShop(item) {
				if (!item.isRange) {
					let user_address = Cache.get('user_address', true)
					uni.showToast({
						// title: `不在${user_address.address}配送范围内`,
						title: `不在配送范围内`,
						icon: 'none'
					});
					return;
				}
				if (typeof item.is_choose == 'undefined') {
					this.total += Number(item.cart_num) * Number(item.productAttr.price)
					this.total.toFixed(2)
					this.$set(item, 'is_choose', true)
				} else {
					if (!item.is_choose) {
						this.total += Number(item.cart_num) * Number(item.productAttr.price)
						this.total.toFixed(2)
					} else {
						this.total -= Number(item.cart_num) * Number(item.productAttr.price)
						this.total.toFixed(2)
					}
					this.$set(item, 'is_choose', !item.is_choose)
				}
			},
			// 购物车减
			cartDel(item) {
				item.cart_num -= 1
				if (item.cart_num <= 0) {
					item.cart_num = 0
				}
				cartChangeApi(item.cart_id, {
					cart_num: item.cart_num
				}).then(res => {
					if (item.is_choose) {
						this.total = Number(this.total) - Number(item.productAttr.price)
						this.total.toFixed(2)
					}
				}).catch(err => {
					item.cart_num += 1
					this.$showToast(err.message)
				})
			},
			// 购物车加
			cartAdd(item) {
				item.cart_num += 1
				cartChangeApi(item.cart_id, {
					cart_num: item.cart_num
				}).then(res => {
					if (item.is_choose) {
						this.total = Number(this.total) + Number(item.productAttr.price)
						this.total.toFixed(2)
					}
				}).catch(err => {
					item.cart_num -= 1
					this.$showToast(err.message)
				})
			},
			// 立即购买
			goBuy() {
				let This = this
				if (this.total <= 0) {
					let cart = []
					// this.list2.forEach(cartInfo => {
					// 	if (cartInfo.check && cartInfo.cart_num) {
					// 		cart.push(cartInfo)
					// 	}
					// })
					this.$showToast('请选中要购买的商品')
					return;
					Cache.set('cartToPayCheck', cart)
					// 生成订单
					uni.navigateTo({
						// url: '/pages/client/order/order-sure2/order-sure2'
						url: '/pages/client/order/order-sure/order-sure'
					})
				}
				let showData = {
					use_integral: false,
					cart_id: [],
					use_coupon: {}
				}

				this.cart_list.forEach((merdata, key1) => {
					for (let key2 in merdata.list) {
						merdata.list[key2].forEach((cart, key3) => {
							if (cart.is_choose) {
								showData.cart_id.push(cart.cart_id)
								showData.use_coupon[cart.mer_id] = []
							}
						})
					}
				})
				orderCheckApi(showData).then(res => {
					let data = [];
					res.data.order.forEach(merOrder => {
						merOrder.list.forEach(cartData => {
							data.push(cartData)
						})
						Cache.set('cartToPayCheck', data)
					})
					uni.navigateTo({
						url: '/pages/client/order/order-sure/order-sure'
					})
				}).catch(err => {
					this.$showToast(err.message)
				})
			},
			gotoSimilar(item) {
				let cate_id = 0
				console.log(item)
				let cateIds = []
				let keys = Object.keys(item.list)
				keys.forEach(key => {
					item.list[key].forEach(cart => {
						cateIds.push(cart.product.cate_id)
					})
				})
				cate_id = cateIds[Math.floor(Math.random() * cateIds.length)];
				if (cate_id)
					uni.navigateTo({
						url: `/pages/client/smilar/smilar?cate_id=${cate_id}`
					})

			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
	.one{
		width:400rpx ;
		text-overflow: ellipsis;
	}
</style>

<style lang="scss">
	.box {
		padding: 0 0 130rpx;

		.none {
			overflow: hidden;

			.none-img {
				margin: 180rpx auto 94rpx;
				width: 464rpx;
				height: 311rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.none-desc {}

			.btn {
				margin: 66rpx auto;
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}

		.tag {
			margin-right: 8rpx;
			padding: 1rpx 6rpx;
			font-size: 24rpx;
			color: #fff;
			background: linear-gradient(-50deg, #F83535 0%, #FC6767 100%);
			border-radius: 4rpx;
		}

		.tag2 {
			display: inline-block;
			padding: 1rpx 8rpx;
			font-size: 24rpx;
			color: #F83535;
			background: #FEF7F7;
		}

		.tag3 {
			margin-left: 10rpx;
		}

		.red {
			color: #F83535;
		}

		.bg2 {
			width: 70rpx;
			height: 1rpx;
			background: #999999;
		}

		.list {
			min-height: 100vh;
			background-color: #F5F5F5;

			.del {
				text-align: right;
				padding: 18rpx 20rpx;
			}

			.choose {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.cart {
				margin: 0 auto;
				width: 710rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				box-sizing: border-box;
				margin-bottom: 30rpx;

				.cart1 {
					margin-bottom: 30rpx;
				}

				.card {
					margin-top: 35rpx;
					background: #EBFDF9;
					border-radius: 20rpx;

					.card2 {
						padding: 16rpx 10rpx;
					}

					.right {
						flex: 1;
						margin-left: 20rpx;
						// overflow: hidden;

						.img {
							flex-shrink: 0;
							width: 190rpx;
							height: 190rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 12rpx;
							}
						}

						.msg {
							position: relative;
							flex: 1;
							margin-left: 16rpx;
							overflow: hidden;

							.p2 {
								text-decoration: line-through;
							}

							.one {}

							.three {
								height: 50rpx;
							}

							.cart-btn {
								// position: absolute;
								// right: 0;
								// bottom: 0;
								display: flex;
								justify-content: flex-end;
								padding-right: 20rpx;

								input {
									width: 60rpx;
									font-weight: 600;
									font-size: 28rpx;
									text-align: center;
								}

								.cart1-jian,
								.cart1-add {
									width: 80rpx;
									height: 40rpx;
                                    display: flex;
									justify-content: center;
									image {
										width: 40rpx;
										height: 40rpx;
									}
								}
							}
						}
					}
				}
			}

			// 每日推荐
			.tuijian {
				margin: 60rpx auto;
				width: 710rpx;
				overflow: hidden;
				box-sizing: border-box;

				.tj-title {
					margin-bottom: 26rpx;
				}

				.f32 {
					margin: 0 5rpx;
				}
			}

			// 底部购物车
			.bottom {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 750rpx;
				height: 130rpx;
				padding: 20rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				z-index: 20;

				.qx {
					margin-left: 16rpx;
				}

				.total {
					.total2 {
						margin-bottom: 5rpx;
					}
				}

				.buy {
					width: 260rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
					background: linear-gradient(64deg, #2BCCA5, #22B591);
					border-radius: 45rpx;
				}
			}
		}
	}
</style>
